<template>
  <div class="content-card">
    <div class="title">
      <a-icon type="tags"></a-icon>
      <span>{{ "资源类型占比" }}</span>
    </div>
    <div class="body">
      <div id="data-dev__chart1"></div>
    </div>
  </div>
</template>

<script>
import API from "@/api/develop";
export default {
  name: "d3-chart",
    data(){
      return {
          resourceProportion: [],

      }
    },
  methods: {
      getBoxData() {
          let handleV1 = (res) => (
             this.resourceProportion = JSON.parse(res.data.resultContent).resourceProportion,
                 this.registerAndSetCharts1()
          );

          API.getdycs().then(handleV1);

      },
      getTask() {
          return () => {
              this.getBoxData();
          };
      },

      registerAndSetCharts1() {
          let charts2Ref = this.$echarts.init(
              document.getElementById("data-dev__chart1")
          );
          let option2 = {
              tooltip: {
                  trigger: "item",
              },
              legend: {
                  bottom: "5%",
              },
              series: [
                  {
                      name: "目录资源类型",
                      type: "pie",
                      radius: ["30%", "50%"],
                      top: "-15%",
                      emphasis: {
                          label: {
                              fontSize: "12",
                              fontWeight: "bold",
                          },
                      },
                      data: this.resourceProportion,
                  },
              ],
          };
          charts2Ref.setOption(option2);
      },
  },

  mounted() {
      this.getTask()(); // 先执行 一次任务
      this.timer = setInterval(this.getTask(), 30000); // 设置周期触发任务
  },
  beforeDestroy() {
      clearInterval(this.timer);
      this.timer = null;
  }
};
</script>

<style lang="less" scoped>
.content-card {
  .title {
    display: flex;
    align-items: center;
    padding: 10px 0;
    background: linear-gradient(to right, #dee9ff, #ffffff);
    i {
      color: #6989c6;
      margin: 0 15px;
      font-size: 18px;
    }
    span {
      font-size: 16px;
      font-weight: 500;
    }
  }
  .body {
    width: 100%;
    height: 220px;
    :nth-child(1) {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
